<template>
	<view>
		<view class="video_tit_box">
			<image src="../../static/images/video_tit.jpg" class="video_tit"></image>
		</view>
		<view class="nav-bar">
			<scroll-view scroll-x="true" v-if="video_category.length > 5">
				<view  class="nav-bar-box">
					<view class="item" :class="{'active':active==0}"  @click="check_category(0)">全部</view>
					<view class="item" v-for="(item , key) in video_category" :key="key" @click="check_category(item.id)" :class="{'active':active==item.id}">{{item.name}}</view>
				</view>
			</scroll-view>
			<view class="nav-bar-box_1" v-if="video_category.length < 6">
				<view class="item" :class="{'active':active==0}"  @click="check_category(0)">全部</view>
				<view class="item" v-for="(item , key) in video_category" :key="key" @click="check_category(item.id)" :class="{'active':active==item.id}">{{item.name}}</view>
			</view>
		</view>
		<view class="" v-if="video_vr.length>0">
			<view class="tit_nav">VR专区</view>
			<view class="banner">
				<swiper :indicator-dots="true" indicator-active-color="gray" indicator-color="#cccccc" :autoplay="true"  class="banner-img">
					<swiper-item v-for="(item,key) in video_vr" :key="key">
						<image  class="banner-img" lazy-load="true" :src="item.image" @click="goType(item)" mode="widthFix"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="tit_nav" v-if="video_vr.length>0">视频专区</view>
		<view class="video_list">
			
			<view class="video_box" v-for="(item,key) in video_list_g" :key = "key" @click="go_detail(item.id,item.category_name)">
				<view class="video">
					<image :src="item.cover_url" class="video-img" mode="scaleToFill"></image>
					<image src="../../static/images/play.png" class="play"></image>
				</view>
				<view class="video-dec">
					{{item.title}}
				</view>
				<view class="video-bot">
					<view class="">{{item.category_name}}</view>
					<view class="">浏览 {{item.browse_times}}</view>
				</view>
			</view>
			
		</view>
		<view class="write-box">
			<image lazy-load="true"  src="../../static/images/huishou.png" @click="goPost()" class="write"></image>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:0,
				video_category:[],
				video_vr:[],
				video_list_g:[]
			}
		},
		onShow() {
			var self = this;
			this.$request.request({
				url:'/mts/video_category',
				success:function(res){
					if(res.code==200){
						var x = res.result;
						// console.log(x)
						self.video_category = x
					}else{
						
					}
				}
			});
			this.$request.request({
				url:'/mts/vr',
				success:function(res){
					if(res.code==200){
						var x = res.result;
						x.forEach((item,index)=>{
							x[index].image = self.$http_img(item.image);
						})
						self.video_vr = x
					}else{
						
					}
				}
			});
			this.video_list('');
			
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name+'.视频专区', // 分享标题
				link: self.$request.h5_share_url+'?page=video', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '真实买家走心推荐，你一定不要错过！', // 分享描述
				link: self.$request.h5_share_url+'?page=video', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
			
		},
		methods: {
			check_category(id){
				this.active = id;
				this.video_list(id);
			},
			video_list(id){
				var self = this;
				
				this.$request.request({
					url:'/mts/video_list',
					data:{
						p:1,
						per:100000,
						category_id:id
						
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							x.forEach((item1,index1)=>{
								self.video_category.forEach((item,index)=>{
									if(item1.category_id == item.id){
										x[index1].category_name = item.name
									}
								});
								x[index1].cover_url = self.$oss_img(item1.cover_url)
							})
							
							console.log(x)
							self.video_list_g = x
						}else{
							
						}
					}
				});
			},
			go_detail(id,category_name){
				uni.navigateTo({
					url:'../video-detail/video-detail?id='+id+'&name='+category_name
				})
			},
			goType(obj){
				window.location.href = obj.url
			},
			goPost(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
@import url("video.css");
</style>
